﻿@page "/textareas"

<h3>Textarea 多行文本框</h3>

<h4>用于录入大量文字</h4>

<Block Title="基本用法" Introduction="可接受大量文字">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4"></Textarea>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4" IsDisabled="true"></Textarea>
</Block>

<Block Title="只读" Introduction="设置 <code>readonly</code> 属性时，组件禁止输入">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4" readonly></Textarea>
</Block>

<Block Title="高度" Introduction="设置 <code>rows</code> 属性时，组件初始化显示固定行数高度">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4"></Textarea>
</Block>

<Block Title="双向绑定" Introduction="绑定组件内变量，数据自动同步">
    <div class="row g-3">
        <div class="col-12">
            <label class="form-label">基本用法</label>
            <Textarea placeholder="请输入 ..." rows="4" @bind-Value="@Text"></Textarea>
        </div>
        <div class="col-12">
            <label class="form-label">绑定值</label>
            <div class="form-control textarea-demo">@Text</div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
